<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title th:text="#{topic} + ' - Online Judge'"></title>
    <meta http-equiv="keywords" th:content="'HappyOJ, Online Judge, 编程, 在线判题系统, 在线IDE'">
    <meta http-equiv="description" th:content="'HappyOJ ' + #{topic}">
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.preview.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/marked.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/prettify.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/editormd.min.js}"></script>
    <script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
    <script type='text/javascript' th:src='@{/js/topic.js}'></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div id="nav-content" >
                <a th:href="@{/topics}" th:if="${session.session_username != username}" class="current">[[#{topic}]]</a>
                <a th:href="@{/topics}" th:if="${session.session_username == username}">[[#{topic}]]</a>
                <a th:href="@{/topics/{username}(username=${session.session_username})} + '/page/1'"
                   th:if="${session.session_username == username && session.session_username != null}" class="current">[[#{mytopics}]]</a>
                <a th:href="@{/topics/{username}(username=${session.session_username})} + '/page/1'"
                   th:if="${session.session_username != username && session.session_username != null}">[[#{mytopics}]]</a>
                <a th:href="@{/topic/new}">[[#{topic.new}]]</a>
            </div>
            <div id="RecentBlogs">
                <ul class='BlogList' th:if="${pageInfo.size == 0}" >
                    <li> There is no topic. </li>
                </ul>
                <ul class='BlogList' th:each="message,stat : ${pageInfo.list}">
                    <li class="topic-item" th:messageId="${message.message_id}">
                        <a th:href="@{/profile/{username}(username=${message.create_user})}" class='u user-tip'
                           th:user="${message.create_user}" >
                           <img class="normal-avatar" th:src="${message.user.avatar}" th:alt="${message.create_user}" />
                        </a>
                        <div class='b'>
                            <h3>
                                <a th:href="@{/topic/{messageId}(messageId=${message.message_id})}"
                                   th:text="${message.title}" th:styleappend="${message.orderNum>0}? 'color:red':''">
                                </a>
                            </h3>
                            <div th:if="${message.mode==1}" class="abstract markdown-view" th:id="'topic-content-markdown-view' + ${message.message_id}" >
                                <textarea style="display:none;" th:utext="${message.content_abstract}"></textarea>
                            </div>
                            <span th:if="${message.mode!=1}" class="abstract" th:utext="${message.content_abstract}"></span>
                            <a class="more" th:href="@{/topic/{messageId}(messageId=${message.message_id})}">[[#{topic.more}]] >></a>&nbsp;
                            <div class="tags">
                                <span th:each="tag : ${message.tags}">
                                     <a th:href="'/topics?tag=' + ${tag.name}" rel="tag" th:text="${tag.name}"></a>
                                </span>
                            </div>
                            <div class="buttom">
                                <div class="opts">
                                    <span class="div-icon-svg" th:title="#{topic.views}">
                                        <svg viewBox="0 0 24 24" aria-hidden="true" class="icon-svg"><g><path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path></g></svg>
                                        <span th:text="${message.views}"></span>
                                    </span>
                                    <span class="div-icon-svg" th:title="#{topic.reply}">
                                        <svg viewBox="0 0 24 24" aria-hidden="true" class="icon-svg"><g><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path></g></svg>
                                        <a th:href="@{/topic/{messageId}#comments(messageId=${message.message_id})}" th:text="${message.comments}"></a>
                                    </span>
                                </div>
                                <div class='date'>
                                    <a th:href="@{/profile/{username}(username=${message.create_user})}"
                                       th:class="'rated-user user-rate-' + ${message.user.rate}  + ' user-tip'"
                                       th:user="${message.create_user}" th:text="${message.create_user}"></a>&nbsp;[[#{post}]]
                                       <span th:title="${#dates.format(message.in_date,'yyyy-MM-dd HH:mm:ss')}" th:text="${message.friendly_Date}"></span>
                                       <span th:if="${message.lastRplUser != null}"> &nbsp;,&nbsp;[[#{topic.lastreply}]]
                                        (<span th:title="${#dates.format(message.lastReplyDate,'yyyy-MM-dd HH:mm:ss')}" th:text="${message.lastReplyFriendlyDate}"></span>):
                                        <a th:href="'/topic/' + ${message.message_id} + '#rpl_' + ${message.lastReplyId}"
                                           th:class="'rated-user user-rate-' + ${message.lastRplUser.rate}  + ' user-tip'"
                                           th:user="${message.lastRplUser.username}" th:text="${message.lastRplUser.username} + '&gt;&gt;'"></a>
                                       </span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

                <div style="margin:0 12px;font-size:15px;">
                    <div class=left></div>
                    <div class="right">
                        <a th:if="${pageInfo.hasPreviousPage == true}"
                           th:href="'/topics/' + (${username != null}? ${username} + '/' : '') + 'page/' + ${pageInfo.prePage}"
                           style="color:#000;text-decoration: none;">&larr;</a>
                        <a th:if="${pageInfo.firstPage > 1}"
                           th:href="'/topics/'  + (${username != null}? ${username} + '/' : '') + 'page/1'"
                           style="color:#000;text-decoration: none;">1</a>
                        <span th:if="${pageInfo.firstPage > 2}"  >...</span>
                        <span th:each="nav:${pageInfo.navigatepageNums}">
                        <a th:href="'/topics/' + (${username != null}? ${username} + '/' : '') + 'page/' + ${nav}"
                           th:text="${nav}" th:if="${nav == pageInfo.pageNum}" style="font-weight: bold;color:#000;text-decoration: none;"></a>
                        <a th:href="'/topics/' + (${username != null}? ${username} + '/' : '') + 'page/' + ${nav}"
                           th:text="${nav}" th:if="${nav != pageInfo.pageNum}" style="color:#000;text-decoration: none;"></a>
                        </span>
                        <span th:if="${pageInfo.lastPage < pageInfo.pages}" >...</span>
                        <a th:if="${pageInfo.pages > pageInfo.lastPage}"
                           th:href="'/topics/' + (${username != null}? ${username} + '/' : '') + 'page/' + ${pageInfo.pages}"
                           th:text="${pageInfo.pages}" style="color:#000;text-decoration: none;"></a>
                        <a th:if="${pageInfo.hasNextPage == true}"
                           th:href="'/topics/' + (${username != null}? ${username} + '/' : '') + 'page/' + ${pageInfo.nextPage}"
                           style="color:#000;text-decoration: none;">&rarr;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
</body>
</html>
